<template>
	<view>
		<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			<image class="avatar" :src="avatarUrl"></image>
		</button>

		<view class="" style="display: flex;padding: 20rpx;">
			<view class="" style="width: 100rpx;">
				<text>昵称</text>
			</view>
			<view class="" style="flex: 1;">
				<input type="nickname" v-model="nickName" @blur="handleInput" class="weui-input" placeholder="请输入昵称" />
			</view>
		</view>
		<button style="margin: 20rpx;" type="primary" @click="login">保存</button>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		login,
		uploadFile,
		updateUserInfo
	} from "@/api/api.js";
	import {
		is,
		getUrl
	} from '@/config.js'
	export default {
		data() {
			return {
				avatarUrl: '',
				nickName: '',
			}
		},
		mounted() {
			console.log(this.$store.state.userInfo)
			this.nickName = this.$store.state.userInfo.nickName
			this.avatarUrl = this.$store.state.userInfo.avatarUrl
		},
		methods: {
			handleInput(e) {
				console.log(e,'昵称eeeeeeeeeeeee')
				this.nickName = e.detail.value
			},
			onChooseAvatar(e) {
				console.log(e,'头像eeeeeeeeeeeeeeee')
				const {
					avatarUrl
				} = e.detail
				uni.$u.http.upload('https://www.ainaoxingdong.com/api/an-media/upload', {
					name: 'file',
					filePath: avatarUrl,
				}).then(res => {

					this.avatarUrl = 'https://www.ainaoxingdong.com/api' + res.msg
					console.log(this.avatarUrl)
				})
				// uploadFile(avatarUrl).then(res => {
				// 	this.avatarUrl = res.msg
				// })
			},
			// 保存
			login() {
				const _this = this;
				// console.log(this.nickName, this.avatarUrl)
				if (this.nickName == '' || this.avatarUrl == '') {
					uni.$u.toast('请选择头像和昵称')
					return
				}

				updateUserInfo({
					userIcon: this.avatarUrl,
					nickName: this.nickName
				}).then(res => {
					uni.$u.toast('更新成功')
					this.$store.dispatch('checkUser')
				})

				// 	wx.login({
				// 		success(res) {
				// 			if (res.code) {
				// 				//发起网络请求
				// 				login({
				// 					nickName: _this.nickName,
				// 					userIcon: _this.avatarUrl,
				// 					code: res.code,
				// 				}).then(
				// 					(res) => {
				// 						const userInfo = {
				// 							nickName: _this.nickName,
				// 							avatarUrl: _this.avatarUrl,
				// 						}
				// 						_this.$refs.uToast.show({
				// 							type: "success",
				// 							message: res.msg,
				// 						});
				// 						// 设置vuex 和 本地缓存
				// 						uni.setStorageSync("token", res.token);
				// 						uni.setStorageSync("userInfo", JSON.stringify(
				// 							userInfo));
				// 						_this.$store.commit("set_user_info", userInfo);
				// 						_this.$store.commit("set_token", res.token);
				// 						uni.navigateBack()
				// 					},
				// 					(err) => {
				// 						_this.$refs.uToast.show({
				// 							type: "error",
				// 							message: err.msg,
				// 						});
				// 						_this.$store.dispatch("clearStorage");
				// 					}
				// 				);
				// 			} else {
				// 				console.log("登录失败！" + res.errMsg);
				// 			}
				// 		},
				// 		fail(err) {
				// 			console.log(err, "errerr");
				// 		},
				// 	});
			}
		}
	}
</script>

<style>
	.avatar-wrapper {
		padding: 0;
		width: 224rpx !important;
		border-radius: 8px;
		margin-top: 40px;
		margin-bottom: 40px;
		border-radius: 50%;
	}

	.avatar {
		display: block;
		width: 224rpx;
		height: 224rpx;
		border-radius: 50%;
	}
</style>
